<!-- pages/components/video/video.vue -->
<template>
	<view class="wrapper">
		<!-- 视频1: 基础控件 -->
		<view class="title">1. 基础控件 (controls)</view>
		<view class="description">
			添加controls属性显示播放控件，包括播放/暂停、进度条、音量、全屏等按钮
		</view>
		<video 
			class="my-video"
			:src="videos[0]"
			:controls="videoProps[0].controls"
		></video>

		<!-- 视频2: 自动播放与静音 -->
		<view class="title">2. 自动播放与静音 (autoplay + muted)</view>
		<view class="description">
			autoplay属性让视频自动播放，muted属性使视频静音。注意：大部分平台要求自动播放必须静音
		</view>
		<video 
			class="my-video"
			:src="videos[1]"
			:autoplay="videoProps[1].autoplay"
			:muted="videoProps[1].muted"
			:controls="videoProps[1].controls"
		></video>

		<!-- 视频3: 循环播放与封面 -->
		<view class="title">3. 循环播放与封面 (loop + poster)</view>
		<view class="description">
			loop属性让视频循环播放，poster属性设置视频封面图，在视频加载前或未播放时显示
		</view>
		<video 
			class="my-video"
			:src="videos[2]"
			:loop="videoProps[2].loop"
			:poster="videoProps[2].poster"
			:controls="videoProps[2].controls"
		></video>

		<!-- 视频4: 播放按钮控制 -->
		<view class="title">4. 播放按钮控制 (show-play-btn + show-center-play-btn)</view>
		<view class="description">
			show-play-btn控制是否显示播放按钮，show-center-play-btn控制是否显示中间播放按钮
		</view>
		<video 
			class="my-video"
			:src="videos[3]"
			:show-play-btn="videoProps[3].showPlayBtn"
			:show-center-play-btn="videoProps[3].showCenterPlayBtn"
			:controls="videoProps[3].controls"
		></video>

		<!-- 视频5: 方向与播放策略 -->
		<view class="title">5. 方向与播放策略 (direction + play-strategy)</view>
		<view class="description">
			direction设置全屏时视频方向，play-strategy设置播放策略(0: 按列表顺序, 1: 单个循环)
		</view>
		<video 
			class="my-video"
			:src="videos[4]"
			:direction="videoProps[4].direction"
			:play-strategy="videoProps[4].playStrategy"
			:controls="videoProps[4].controls"
		></video>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                videos: [
                    "/static/video/01.mp4",
                    "/static/video/02.mp4",
                    "/static/video/03.mp4",
                    "/static/video/04.mp4",
                    "/static/video/05.mp4",
                ],
                videoProps: [
                    {
                        name: "基础控件",
                        controls: true
                    },
                    {
                        name: "自动播放与静音",
                        autoplay: true,
                        muted: true,
                        controls: true
                    },
                    {
                        name: "循环播放与封面",
                        loop: true,
                        poster: "/static/logo.png",
                        controls: true
                    },
                    {
                        name: "播放按钮控制",
                        showPlayBtn: true,
                        showCenterPlayBtn: true,
                        controls: true
                    },
                    {
                        name: "方向与播放策略",
                        direction: 0, // 0: 正常竖向, 1: 横向, 2: 跟随系统
                        playStrategy: 0, // 0: 按列表顺序, 1: 单个循环
                        controls: true
                    }
                ]
            }
        }
    }
</script>

<style>
.wrapper {
	padding: 15px;
}
.title {
	font-size: 16px;
	font-weight: bold;
	padding: 10px 0;
	margin-top: 20px;
	color: #2c3e50;
	border-bottom: 1px solid #eee;
}
.description {
	font-size: 14px;
	color: #666;
	padding: 8px 0;
	line-height: 1.5;
	background-color: #f9f9f9;
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}
.my-video {
	width: 100%;
	height: 300px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>